<template>
    <div class="container">
        <!-- 客户标签管理 -->
        <div class="fileMain">
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline formData_form_inline"
                size="small"
            >
                <el-form-item label="文件名称">
                    <el-input v-model="formData.fileName" placeholder="请输入文件名称"></el-input>
                </el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="hanlesearch"
                    class="searchBtn"
                >查询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                    class="resetBtn"
                >重置</el-button>
            </el-form>
            <div style="margin-bottom: 16px;">
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-upload"
                    @click="clickUpload"
                >上 传</el-button>
            </div>
            <div v-if="columnDialogFlag" v-drag class="columnDialog">
                <el-scrollbar wrap-class="side-bar-scrollbar-wrap">
                    <div v-for="item in tableHead" :key="item.prop">
                        <el-checkbox v-model="item.flag" @change="changeChecked(item)"></el-checkbox>
                        <span style="font-size: 14px;margin-left: 4px;">{{item.label}}</span>
                    </div>
                </el-scrollbar>
            </div>
            <el-table :data="tableData" width="100%" stripe border class="heard-bg">
                <el-table-column label="文件类型" prop="fileType"></el-table-column>
                <el-table-column label="文件名称" prop="originFileName"></el-table-column>
                <el-table-column label="文件格式" prop="extension"></el-table-column>
                <el-table-column label="文件大小" prop="fileSize"></el-table-column>
                <el-table-column label="文件路径" prop="filePath"></el-table-column>
                <el-table-column label="创建时间" prop="createdTime"></el-table-column>
                <!--<el-table-column label="MD5码" prop="md5Code"></el-table-column>-->
                <el-table-column label="操作" prop="networkPath">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            circle
                            icon="el-icon-download"
                            title="下载"
                            @click="downloadFile(scope.row)"
                        />
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            title="删除"
                            circle
                            @click="handleDelete(scope.row)"
                        />
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                    :handleChangeSize="handleChangeSize"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                />
            </div>
        </div>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
            @close="cancelClick"
        >
            <div slot="title">文件上传</div>
            <input type="file" ref="input" id="fileupload" @input="upload" />
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="cancelClick"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="handlefileUpload"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import { RegConfig } from '@/utils/RegConfig';
import request from '@/apis/request';
import { getToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'fileMain',
    components: {
        Pagination,
    },
    data() {
        return {
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 表格内容
            tableData: [],
            Show: false,
            files: {},
            formData: {
                fileName: '',
            },
            columnDialogFlag: false,
        };
    },
    mounted() {
        this.getInitData(this.formData);
    },
    methods: {
        // 获取用户表格数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
            };
            params = Object.assign({}, params, form);
            this.$post.fileUpload.searchByPage(params)
                .then((res) => {
                    if (res.data.success) {
                        this.tableData = res.data.content.recordList;
                        this.total = res.data.content.recordCount;
                    }
                });
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击重置
        handleReset() {
            this.formData = {
                fileName: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 动态列设置
        columnSetting() {
            console.log(1);
            this.columnDialogFlag = !this.columnDialogFlag;
        },
        // 选择要展示的列
        changeChecked(val) {
            return !val.flag;
        },
        // 动态列设置保存
        handleSubmit() {
            this.columnDialogFlag = false;
        },
        upload() {
            this.files = this.$refs.input.files[0];
        },
        // 点击上传
        clickUpload() {
            this.Show = true;
        },
        // 点击确定按钮
        handlefileUpload() {
            if (!this.files.name) {
                this.$message.warning('请选择需要导入的文件！');
                return;
            }
            const data = new FormData();
            data.append('file', this.files);
            this.$post.fileUpload.uploadMultipartFile(data)
                .then((res) => {
                    if (res.data.success) {
                        // if(res.data.content.code === '000000'){
                        //     this.$message.success('导入成功！');
                        //     const obj = document.getElementById('fileupload');
                        //     obj.value = '';
                        //     this.getInitData(this.formData);
                        //     this.Show = false;
                        // }else{
                        //     this.$message.error(res.data.content.msg);
                        // }
                        this.$message.success('上传文件成功！');
                        const obj = document.getElementById('fileupload');
                        obj.value = '';
                        this.getInitData(this.formData);
                        this.Show = false;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
        },
        // 单个删除
        handleDelete(row) {
            this.$confirm('确认删除该文件？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.fileUpload.deleteOneFile({ id: row.id })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.tableData.length === 1) {
                                    this.currentPage = this.currentPage - 1;
                                }
                                this.getInitData(this.formData);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 取消
        cancelClick() {
            const obj = document.getElementById('fileupload');
            obj.value = '';
            this.Show = false;
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData(this.formData);
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData(this.formData);
        },
        downloadFile(row) {
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = row.networkPath;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        },
    },
};
</script>

<style  lang="scss">
.downloadClass {
    margin-left: 18%;
    color: #409eff;
}
.container {
    width: 100%;
    height: 100%;
    .fileMain {
        position: relative;
        width: 100%;
        background: #fff;
        margin-bottom: 15px;
        // border-radius:5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;
        .columnDialog {
            width: 200px;
            z-index: 2;
            padding: 12px;
            background: #fff;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
            -moz-box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
            box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
            position: absolute;
            left: 20px;
            top: 120px;
            .dialog-footer {
                margin-top: 12px;
            }
            /deep/ .side-bar-scrollbar-wrap {
                max-height: 600px;
                min-height: 300px;
            }
        }

        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
    }
}
</style>
